<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="dataForm">
      <el-form-item>
        <el-button
          type="primary"
          @click="addOrUpdateHandle()"
          v-if="isAuth('sys:department:save')"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!--  <el-table-column
          prop="date"
          label="编号"
          width="180">
        </el-table-column> -->
      <el-table-column prop="name" align="center" label="分类名称">
      </el-table-column>
      <!-- <el-table-column
        prop="parent_id"
        align="center"
        :formatter="parentId"
        label="分类级别"
      > -->
      </el-table-column>
      <el-table-column prop="parent_id" align="center" label="是否推荐">
        <template slot-scope="{ row }">
          <el-tag v-if="row.recommend" type="success">推荐</el-tag>
          <el-tag v-else type="danger">不推荐</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="order_index" align="center" label="排序">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作"
        width="120px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="addOrUpdateHandle(scope.row.id, scope.row.parent_id)"
            v-if="isAuth('sys:department:update')"
            >修改</el-button
          >
          <el-button
            type="text"
            class="c-error"
            size="small"
            @click="deleteHandle(scope.row.id)"
            v-if="isAuth('sys:department:del')"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pamars.limit"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pamars.page"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination> -->
    <!-- 弹窗, 新增 / 修改 -->
    <favourDialog
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @updataList="updataList"
    ></favourDialog>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
import favourDialog from './favour-dialog'
export default {
  data() {
    return {
      dataForm: {},
      pamars: {
        page: 1,
        limit: 10
      },
      totalPage: 0,
      tableData: [],
      dataListLoading: false,
      addOrUpdateVisible: false
    }
  },
  components: {
    favourDialog
  },
  mounted() {
    this.getList()
  },
  methods: {
    updataList(e) {
      if (e == 1) {
        this.getList()
      }
    },
    getList() {
      seviceApi.getHxCategoryAllList(this.pamars).then((res) => {
        if (res && res.data.code == 200) {
          this.tableData = res.data.list
          this.totalPage = res.data.totalCount
        }
      })
    },
    // 分类级别
    parentId(row, column) {
      let pid = row.parent_id
      if (pid === 0) {
        return '一级'
      } else {
        return '二级'
      }
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([])
      }, 1000)
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pamars.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pamars.page = val
      this.getList()
    },
    // 新增 / 修改
    addOrUpdateHandle(id, parent_id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id, parent_id)
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm(`确定要删除该条数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          seviceApi.deleteHxCategory(id).then((res) => {
            if (res && res.data.code == 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getList()
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>
